<template>
  <div class="course">
    <div class="course-top">
      <img :src="url2" alt="" class="tuo" />
      <img :src="url1" alt="" @click="showPopup" />
      <img :src="url3" alt="" class="ka" />
      <van-popup
        v-model:show="show"
        position="bottom"
        closeable
        close-icon-position="top-left"
        :style="{ height: '50%' }"
      >
        <div class="toke">
          <ul>
            <li v-for="item in list" :key="item">
              <span>{{ item }}</span>
              <b></b>
            </li>
          </ul>
          <div class="send">
            <input type="text" v-model="msg" />
            <button @keyup.enter="send" @click="send">发送</button>
          </div>
        </div></van-popup
      >
    </div>
    <div class="course-center">
      <div class="flag-img">
        <img :src="url4" alt="" class="c-img-left" />
        <img :src="url5" alt="" class="c-img-right" />
        <img :src="url6" alt="" class="c-img-left-yuan" />
        <img :src="url6" alt="" class="c-img-right-yuan" />
      </div>
      <div class="advertising">
        <img :src="url7" alt="" class="ulr7" @click="gototrain" />
        <p>将于6月7号开课</p>
      </div>
      <div class="mycourse">
        <div class="mycourse-top">
          <img :src="url8" alt="" />
          <p>我的课程</p>
        </div>
        <ul>
          <li v-for="item in 5" :key="item">
            <img :src="url9" alt="" />
            <h2>African Sadari Animals</h2>
            <p>奇妙的草原动物</p>
            <div>
              <span>05:26后开始上课</span>
              <button @click="gotodetail">进教室</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import url1 from "../../assets/images/组 1(2).png";
import url2 from "../../assets/images/椭圆 7.png";
import url3 from "../../assets/images/卡通形象.png";
import url4 from "../../assets/images/GrowingImages/成就-左回形针.png";
import url5 from "../../assets/images/GrowingImages/成就-右回形针.png";
import url6 from "../../assets/images/椭圆 6 拷贝 11.png";
import url7 from "../../assets/images/图层 1 (1).png";
import url8 from "../../assets/images/组 6.png";
import url9 from "../../assets/images/图层 3 (2).png";
import { useRouter } from "vue-router";
import { Popup } from "vant";
import { ref } from "vue";

export default {
  components: { vanPopup: Popup },
  setup() {
    const router = useRouter();
    // 聊天功能
    let msg = ref("");
    const list = ref([]);
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const send = () => {
      list.value.push(msg.value);
      msg.value = "";
    };
    // 跳转去详情页
    const { gotodetail } = gotodetailfn();

    // gototrain
    const gototrain = () => {
      // console.log(router);
      router.push("/Training");
    };
    return {
      gototrain,
      url1,
      url2,
      url3,
      url4,
      url5,
      url6,
      url7,
      url8,
      url9,
      gotodetail,
      show,
      showPopup,
      msg,
      list,
      send,
    };
  },
};
const gotodetailfn = () => {
  const router = useRouter();
  const gotodetail = () => router.push("/detail");
  return { gotodetail };
};
</script>
<style lang="less" scoped>
.course {
  .course-top {
    width: 100%;
    height: 140px;
    background-color: #41a0fe;
    position: relative;

    .toke {
      position: absolute;
      bottom: 10px;
      left: 10px;

      li {
        margin-bottom: 10px;
        display: flex;

        justify-content: flex-end;
        span {
          text-align: right;
          border-radius: 10px;
          flex: 1;
          background-color: chartreuse;
        }
        b {
          display: inline-block;
          width: 20px;
          height: 20px;
          background-image: url("../../assets/images/形状 1.png");
          background-size: cover;
          border-radius: 50%;
        }
      }
      .send {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        button {
          font-size: 18px;
        }
      }
    }

    img {
      width: 30px;
      height: 29px;
      position: absolute;
      top: 50px;
      right: 25px;
    }
    .tuo {
      top: 40px;
      right: 16px;
      width: 50px;
      height: 50px;
    }
    .ka {
      top: 60px;
      left: 34px;
      width: 120px;
      height: 50px;
    }
  }
  .course-center {
    width: 100%;
    background-color: white;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: 111px;

    .flag-img {
      img {
        position: absolute;
        width: 10px;
        height: 20px;
        top: -10px;
      }
      .c-img-left {
        left: 20px;
      }
      .c-img-right {
        right: 20px;
      }
      .c-img-left-yuan {
        width: 10px;
        height: 10px;
        left: 16px;
        top: 5px;
      }
      .c-img-right-yuan {
        width: 10px;
        height: 10px;
        right: 16px;
        top: 5px;
      }
    }
    .advertising {
      padding: 0 20px;
      .ulr7 {
        width: 120px;
        height: 90px;
        margin-top: 30px;
      }
      p {
        font-size: 16px;
        color: #666;
        line-height: 30px;
      }
    }
    .mycourse-top {
      padding: 0 20px;
      display: flex;
      margin-top: 40px;
      img {
        width: 25px;
        height: 25px;
      }
      p {
        font-size: 20px;
        color: black;
        font-weight: 900;
        margin-left: 10px;
      }
    }
    ul {
      padding: 0 20px;
      margin-bottom: 98px;
      margin-top: 15px;
      li {
        padding: 15px;
        border-radius: 10px;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3),
          -1px -1px 10px rgba(0, 0, 0, 0.3);
        margin-bottom: 40px;
        img {
          width: 100%;
          height: 100%;
        }
        h2 {
          font-size: 20px;
          font-weight: 900;
          margin-top: 10px;
        }
        p {
          font-size: 16px;
          color: #888;
          line-height: 45px;
          font-weight: 900;
          border-bottom: 2px dashed #888;
        }
        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #3b98ff;
          font-size: 16px;
          font-weight: 900;
          line-height: 40px;
          margin-top: 10px;
          button {
            width: 90px;
            height: 40px;
            line-height: 30px;
            color: white;
            background-color: #3b98ff;
            border-radius: 30px;
            border: 0;
          }
        }
      }
    }
  }
}
</style>
